 <!DOCTYPE html>
<style>
div {
	text-align: center;
}
</style>

<div>
<canvas id="canvas" width="500" height="500">  
	<p>浏览器不支持canvas对象!</p>  
</canvas>
</div>

<script type="text/javascript">

(function(){
	
	window.onload = function() {
		var clock = new Clock(document.querySelector('#canvas'));
    };
	
	function Clock(canvas) {
		var ctx = getCanvasContext(canvas);
		if (ctx == null) {
			return;
		}
		
		draw();
		setInterval(draw, 1000);
		
		function getTime() {
			var now = new Date();
			this.hour = now.getHours();
			this.minute = now.getMinutes();
			this.second = now.getSeconds();
			this.hour = this.hour >= 12 ? this.hour - 12 : this.hour;
		}
		
		function getCanvasContext(canvas) {
			if (typeof canvas == 'string') {
				canvas = document.querySelector(canvas);
			}
			
			if (! canvas.getContext) {
				return null;
			}
			
			return canvas.getContext('2d');
		}
		
		function draw() {
			getTime();
			
			ctx.save();
			ctx.clearRect(0, 0, 500, 500);
			ctx.translate(250, 250);
			
			// 画小时刻度
			/*ctx.save();
			ctx.lineWidth = 10;
			ctx.beginPath();
			ctx.textBaseLine = 'middle';
			ctx.font = 'bold 16px Consolas, sans-serif';
			for (var i = 0; i < 12; i++) {
				ctx.moveTo(0, -200);
				ctx.lineTo(0, -220);
				
				// 表盘数字
				ctx.fillText(i == 0 ? 12 : i, -5, -170);
				
				ctx.rotate(Math.PI / 6);
				ctx.stroke();
			}
			
			ctx.restore();
			
			// 画分钟刻度
			ctx.save();	
			ctx.lineWidth = 5;
			ctx.beginPath();
			for (var i = 0; i < 60; i++) {
				if (i % 5 != 0) {
					ctx.moveTo(210, 0);
					ctx.lineTo(220, 0);
				}
				ctx.rotate(Math.PI / 30);
				ctx.stroke();
			}
			
			ctx.restore();*/
			
			ctx.save();
			ctx.lineWidth = 1;
			ctx.textBaseLine = 'middle';
			ctx.font = 'bold 16px Consolas, sans-serif';
			for (var i = 0; i < 60; i++) {
				ctx.beginPath();
				var radius = 5;
				if (i % 5 == 0) {
					radius = 10
					var num = i / 5;
					ctx.fillText(num == 0 ? 12 : num, -5, -180);
				}
				
				ctx.arc(0, -210, radius, 0, Math.PI * 2, false);
				
				ctx.rotate(Math.PI / 30);
				//ctx.stroke();
				ctx.fill();
			}
			ctx.restore();
			
			ctx.lineCap = 'round';
			
			// 画时针
			ctx.save();
			ctx.rotate((Math.PI / 6) * hour + (Math.PI / (6*60)) * minute);
			ctx.beginPath();
			ctx.lineWidth = 12;
			ctx.strokeStyle = '#696';
			ctx.moveTo(0, 20);
			ctx.lineTo(0, -150);
			ctx.stroke();
			ctx.restore();
			
			// 画分针
			ctx.save();
			ctx.rotate((Math.PI / 30) * minute);
			ctx.beginPath();
			ctx.lineWidth = 8;
			ctx.strokeStyle = '#96c';
			ctx.moveTo(0, 30);
			ctx.lineTo(0, -175);
			ctx.stroke();
			ctx.restore();
			
			// 画秒针
			ctx.save();
			ctx.rotate((Math.PI / 30) * second);
			ctx.beginPath();
			ctx.lineWidth = 3;
			ctx.strokeStyle = '#69c';
			ctx.moveTo(0, 40);
			ctx.lineTo(0, -200);
			ctx.stroke();
			ctx.restore();
			
			// 画表盘中心
			ctx.save();
			ctx.beginPath();
			ctx.strokeStyle = '#000';
			ctx.lineWidth = 1;
			ctx.arc(0, 0, 10, 0, Math.PI * 2, false);
			ctx.fill();
			ctx.restore();
			
			// 表盘
			ctx.save();
			ctx.beginPath();
			ctx.strokeStyle = '#000';
			ctx.lineWidth = 1;
			ctx.arc(0, 0, 225, 0, Math.PI * 2, false);
			ctx.stroke();
			ctx.restore();
			
			ctx.restore();
		}		
	}	
})();
</script>  